<template>
  <Card>
    <Api ref="apiRef" :load="page" v-model:input="input" browser>
      <Space direction="vertical">
        <Cond>
          <CondItem title="关键字" field="keyword">
            <Input v-model="input.params.keyword" placeholder="姓名/用户名" />
          </CondItem>
          <CondItem title="创建日期" field="createdAts">
            <DateRangePicker v-model="input.params.createdAts" />
          </CondItem>
          <CondItem title="类型" field="typeId"> </CondItem>
          <CondItem title="状态" field="status">
            <Enum v-model="input.params.status" clazz="AccountStatus" />
          </CondItem>
          <template #op>
            <Button shape="circle" type="primary" @click="onCreate">
              <IconPlus />
            </Button>
          </template>
        </Cond>
      </Space>
    </Api>
  </Card>
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue'
import { Enum, Card, Cond, CondItem, Button, Space, Popover, Table, TableColumn, Input, Avatar, Image, DateRangePicker, Modal } from '@idmy/ui'
import { useConfirm, useDelete, Api } from '@idmy/core'
import { del, page } from './services'
import { IconPlus } from '@idmy/ui-icon'

const Create = defineAsyncComponent(() => import('../create/index.vue'))

const input = ref({
  sorts: ['createdAt', 'desc'],
  params: {
    status: 'NORMAL',
    createdAts: [],
  },
})
const apiRef = ref()
const onLoad = () => apiRef.value.onLoad()

const onDelete = useDelete(del, onLoad)

const onCreate = () => Modal.open({ component: Create, title: '创建账号', width: 2, enableLock: true })

const onUpdate = model =>
  Modal.open({
    component: Create,
    title: '修改账号',
    width: 2,
    props: { model },
    onClose: () => onLoad(),
  })

const onView = model =>
  Modal.open({
    component: Create,
    width: 2,
    title: '账号详细',
    props: { model, mode: 'read' },
  })
</script>
